Http chain observables

Como encadenar varias solicitudes http (observables), cuando unas dependen del resultado de otras.

Codigo de Ejemplo

Para encadenar varios observables (de httpclient en este caso) utilizamos switchMap de la siguiente manera:

  ngOnInit() {
    this.firstService.getInfo()
    .pipe(
      switchMap( data => this.secondService.getInfo()),
      switchMap( data => this.thirdService.getInfo())
    ).subscribe({ 
      next: data => console.log("Respuesta final: " + data.message),
      error: error => console.log(error.status)
    })

    console.log("Ejecución previa a las solicitudes http")
  }

Al hacerlo de esta manera las solicitudes se ejecutarán por orden, para problarlo podemos hacerlo con mockoon, y hacemos que la primera solicitud tarde un par de segundos, normalmente al hacer esto las solicitudes 2 y 3 terminarían antes, pero en este caso al tener encadenadas las solicitudes con switchMap las solicitudes y su respuesta se ejecutan en el orden que hemos indicado.

Dentro del switchMap la función que se ejecute tiene que devolver un observable, en caso de que queramos hacer algún procesamiento adicional de los datos que vamos encadenando podemos hacerlo tal que asi:

  ngOnInit() {
    this.firstService.getInfo()
    .pipe(
      switchMap( data => this.doSecondRequest(data)),
      switchMap( data => this.doThirdRequest(data))
    ).subscribe({ 
      next:data => console.log("Respuesta tercera solicitud: " + data.message),
      error: error => console.log(error.status)
    })

    console.log("Ejecución previa a las solicitudes http")
  }

  doSecondRequest(data: any) {
    console.log("Respuesta primera solicitud: " + data.message)
    return this.secondService.getInfo()
  }

  
  doThirdRequest(data: any) {
    console.log("Respuesta segunda solicitud: " + data.message)
    return this.thirdService.getInfo()
  }

Angular | Observable | Http | switchMap